<!--
 * @Author: HeAo
 * @Date: 2022-09-19 14:33:17
 * @LastEditTime: 2022-09-21 16:26:49
 * @LastEditors: HeAo
 * @Description: 
 * @FilePath: \第二阶段\ES6\day05\5-promise封装ajax.html
 * 别乱动！
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 创建多个承诺对象的实例  
    function promise(method, url, obj) {
      return new Promise((reslove, reject) => {
        // 封装ajax
        let xhr = new XMLHttpRequest()
        // 打开一个连接
        xhr.open(method, url)
        // 发送请求
        xhr.send()
        // 接收响应
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              // 代表请求成功
              reslove(xhr.responseText)
            } else {
              // 代表请求失败
              reject(xhr.responseText)
            }
          }
        }
      })
    }

    let p1 = promise('get', 'http://121.199.0.35:8888/index/article/findCategoryArticles')
    let p2 = promise('get', 'http://121.199.0.35:8888/index/carousel/findAll')
    // console.log(p1);
    // console.log(p2);
    // 2、静态方法 只能由构造函数本身去调用
    // 2.1 all-只有请求全部成功才返回 参数由实例组成的数组 返回值：返回promise实例  
    let res = Promise.all([p1, p2])

    // 2.2 any-任意一个实例状态成功则返回成功实例 参数由实例组成的数组 返回值：返回promise实例 
    // let res = Promise.any([p1, p2])

    // 2.3 race-返回先成功的实例 参数由实例组成的数组 返回值：返回promise实例 
    // let res = Promise.race([p1, p2])

    // 2.4 allSettle-
    /*all和allSettle的区别 
    1.返回的处理格式问题 array:[{},{}]
    2.all 实例 pendding
    */
    // let res = Promise.allSettled([p1, p2])


    console.log(res);
    res.then(res => {
      console.log(res, '请求成功');
    })


    // 1、实例方法
    p1.then(res => {
      console.log(res, '响应1');
    })
    p2.then(res => {
      console.log(res, '响应2');
    })
  </script>

</body>

</html>